<template>
	<view>
		<view class="videoList" v-if="!parameter.layout || parameter.layout == 1">
			<!-- <view class="videoList-title">随手一拍都是大片</view> -->
			<!-- <view class="recommend-list"><view class="video-recommend">搞笑视频</view></view> -->
			<view class="video_details" v-for="(item, index) in dataList" :key="index" @click="goDetail(item)">
				<view class="video">
					<image mode="aspectFill" :src="item.img ? item.img.split(',')[0] : ''"></image>
					<u-icon class="video_icon" name="play-circle"></u-icon>
				</view>
				<view class="details_title u-line-2">{{ item.name }}</view>
				<view class="video-bottom">
					<view class="details_time">{{ item.date_creation | format() }}</view>
					<view class="details_see">
						<u-icon class="see_icon" name="eye"></u-icon>
						<text>{{ item.video_view || 0 }}</text>
					</view>
				</view>
			</view>
		</view>

		<scroll-view
			scroll-x
			class="scroll_view"
			:style="{
				'--borColor': parameter.borColor || '#f2f2f2',
				'--font_color': parameter.font_color || '#000'
			}"
			v-else-if="parameter.layout == 2"
		>
			<view class="scroll_item" v-for="(item, index) in dataList" :key="index" @click="goDetail(item)">
				<view class="scroll_img">
					<u-lazy-load class="img_view" imgMode="aspectFill" :image="item.img ? item.img.split(',')[0] : ''"></u-lazy-load>
					<view class="icon_box"><view class="iconfont iconfont-e615"></view></view>
				</view>
				<view class="name">{{ item.name }}</view>
			</view>
		</scroll-view>
	</view>
</template>
<script>
import { configMixin } from './configMixin.js';
import { formatDate } from '@/utils/moment';
export default {
	mixins: [configMixin],

	data() {
		return {};
	},
	filters: {
		format(data) {
			return formatDate(data, 'YYYY-MM-DD hh:mm');
		}
	},
	methods: {
		goDetail(item) {
			this.$linkTo(`/package/video/details/index?id=${item.pk_id}`);
		}
	}
};
</script>

<style lang="scss" scoped>
.videoList {
	background: #fff;
	padding: 10rpx 30rpx 0;
	.videoList-title {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #666666;
		margin-bottom: 26rpx;
	}
	.recommend-list {
		display: flex;
	}
	.video-recommend {
		border: 1px solid #f34d4e;
		border-radius: 4px;
		font-size: 26rpx;
		height: 42rpx;
		line-height: 40rpx;
		margin-right: 34rpx;
		padding: 0 10rpx;
		color: #f34d4e;
	}
	.video_details {
		width: 690rpx;
		padding-bottom: 38rpx;
	}
	.video {
		height: 340rpx;
		background-color: #000000;
		border-radius: 8rpx 8rpx 0rpx 0rpx;
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		overflow: hidden;
		.video_icon {
			font-size: 90rpx;
			color: #fff;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}
	}
	.details_title {
		font-size: 30rpx;
		color: #333;
		font-weight: bold;
		margin: 12rpx 0;
	}
	.video-bottom {
		display: flex;
		align-items: center;
	}
	.details_time {
		flex: 1;
		overflow: hidden;
		font-size: 26rpx;
		color: #777;
	}
	.details_see {
		display: flex;
		font-size: 26rpx;
		color: #777;
		align-items: center;
		.see_icon {
			font-size: 36rpx;
			color: #666;
			font-weight: bold;
			margin-right: 12rpx;
		}
	}
}

.scroll_view {
	padding: 10rpx 24rpx;
	white-space: nowrap;
	overflow: hidden;
	.scroll_item {
		border-radius: 10rpx;
		border: 1rpx solid var(--borColor);
		padding: 8rpx;
		margin-right: 22rpx;
		display: inline-block;
		width: 502rpx;
		&:nth-last-child(1) {
			margin-right: 0;
		}
		.scroll_img {
			position: relative;
			height: 0;
			width: 100%;
			padding-bottom: 55.8%;
			.img_view {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				border-radius: 10rpx;
				overflow: hidden;
			}
			.icon_box {
				background-color: rgba(0, 0, 0, 0.3);
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				.iconfont {
					color: #fff;
					font-size: 76rpx;
				}
			}
		}
		.name {
			font-size: 28rpx;
			font-weight: bold;
			padding: 16rpx 10rpx 10rpx;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			color: var(--font_color);
		}
	}
}
</style>
